<template>
  <div class="attach" style="height: 450px">
    <div class="content">
      <div class="projectFile" style="height: 350px; overflow-y: auto">
        <div class="attach-cls">
          <div class="upload-control" style="display: flex">
            <ht-upload
              ref="myUpload"
              class="upload-demo"
              multiple
              dbKey="Trd"
              :busField="busField"
              :busType="busType"
              :busKey="busKey"
              ftpKey="ftp"
              v-model="personalFileList"
              :show-file-list="false"
            >
              <a-button type="primary">新增附件</a-button>
            </ht-upload>
          </div>
          <div style="margin-top: 10px">
            <a-table
              class="hte-table-content"
              :columns="uploadColumns"
              :data-source="personalFileQueryList"
              :pagination="false"
              :rowKey="
                (record, index) => {
                  return index
                }
              "
              bordered
              size="middle"
            >
              <a
                slot="name"
                slot-scope="text, record"
                @click="previewAttach(record.id, record.fileName)"
                href="javascript:void(0)"
                title="点击预览附件"
                style="color: blue"
                >{{ text }}</a
              >
              <span slot="uploadTime" slot-scope="text">
                {{ timeFormat(text) }}
              </span>
              <span slot="aciton" slot-scope="text, record">
                <span style="color: blue; cursor: pointer" @click="deletefj(record.id)" type="primary">删除</span>
                <span
                  style="color: blue; cursor: pointer; margin-left: 5px"
                  @click="doDownLoadBatch(record.id)"
                  type="primary"
                  >下载</span
                >
              </span>
            </a-table>
          </div>
        </div>
      </div>
      <div class="btn">
        <a-button size="large" type="primary" @click="doClose()">关闭</a-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getAction,postAction,previewAttach } from '@/api/manage'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import { endWith, formatFileSize } from '@/utils/common.js'
import moment from 'moment'
import '@/utils/upload.install.js'
import $ from 'jquery'
import Vue from 'vue'
const uploadColumns = [
  {
    title: '附件名称',
    dataIndex: 'fileName',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '上传人',
    dataIndex: 'uploaderName',
    width: '10%',
  },
  {
    title: '上传时间',
    dataIndex: 'uploadTime',
    align: 'center',
    width: '15%',
    scopedSlots: { customRender: 'uploadTime' },
  },
  {
    title: '操作',
    dataIndex: 'aciton',
    align: 'center',
    scopedSlots: { customRender: 'aciton' },
    width: '10%',
  },
]

export default {
  props: {
    busKey: {
      Type: String,
      default: '',
    },
    busType: {
      Type: String,
      default: '',
    },
    busField: {
      Type: String,
      default: '',
    },
  },
  data() {
    return {
      personalFileList: [],
      personalFileQueryList: [],
      uploadColumns,
      attachSelectedIds: [], // Check here to configure the default column
      loading: false,
      url: {
        getAttachInfo: '/tp/attach/getAttaches',
        downLoadBatch: '/common/downLoadBatch',
        deleteBatch: '/tp/attach/delete',
      },
    }
  },
  mounted() {},
  computed: {},
  watch: {
    personalFileList: function (newQuestion, oldQuestion) {
      // this.bindBusKey()
      newQuestion.forEach((item) => {
        var newIndex = this.personalFileQueryList.findIndex((item2) => item2.id === item.id)
        if (newIndex == -1) {
          this.personalFileQueryList.push(item)
        }
      })
    },
  },
  methods: {
    timeFormat(time) {
      if (time) {
        return moment(time).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    doClose() {
      this.$emit('closeAttachModal')
    },
    loadAttachInfo() {
      getAction(this.url.getAttachInfo, {
        dbKey: 'Trd',
        busKey: this.busKey,
        busField: this.busField,
        busType: this.busType,
        ftpKey: 'ftp',
      }).then((res) => {
        this.personalFileQueryList = res.data || []
      })
    },
    previewAttach(attachId, fileName) {
      if (
        endWith(fileName, 'rar') ||
        endWith(fileName, 'zip') ||
        endWith(fileName, 'dwg') ||
        endWith(fileName, 'tgz')
      ) {
        this.doDownLoadBatch(attachId)
        return
      }

      let params={
        id:attachId,
        ftpKey:'ftp'
      };
      previewAttach(params).then(result=>{
        const url=URL.createObjectURL(result)
        window.open(process.env.BASE_URL+'/pdf/web/viewer.html?file=' + url)
      }).catch(err => {
        this.$message.warning('下载文件失败');
      })
    },
    doDownLoadBatch(attachIds) {
      if (document.getElementById('_attachToolView_downloadfile_frame') == null) {
        let downloadFrame = $('<iframe id="_attachToolView_downloadfile_frame" style="display: none"></iframe>')
        downloadFrame.appendTo($('body'))
      }
      let iframe = document.getElementById('_attachToolView_downloadfile_frame')
      iframe.src =
        this.API_BASE_URL +
        this.url.downLoadBatch +
        '?attachIds=' +
        attachIds +
        '&dbKey=Trd&ftpKey=ftp&token=' +
        Vue.ls.get(ACCESS_TOKEN)
    },
    // 绑busKey
    bindBusKey() {
      if (this.personalFileList.length > 0) {
        const ids = this.personalFileList.map(function (item) {
          return item.id
        })
        const jsona = { dbKey: 'Trd', id: ids.toString(), busKey: this.busKey }
        var jsonStr = JSON.stringify(jsona)
        this.$refs.myUpload.bindBusKey(jsonStr)
      }
    },
    deletefj(id) {
      const that = this
      this.$confirm({
        title: '是否确认删除？',
        onOk() {
          postAction(that.url.deleteBatch, { id: id, busField: that.busField, busType: that.busType, ftpKey: 'ftp' })
            .then((res) => {
              if (res.code == 1) {
                that.$message.success('删除成功')
                that.personalFileQueryList.splice(
                  that.personalFileQueryList.findIndex((item) => item.id === id),
                  1
                )
                that.personalFileList.splice(
                  that.personalFileList.findIndex((item) => item.id === id),
                  1
                )
              } else {
                that.$message.warning('删除失败:' + res.msg)
              }
            })
            .catch((res) => {
              that.$message.warning('删除失败:' + res.msg)
            })
        },
        onCancel() {},
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.el-upload-list {
  display: none;
}
/deep/.anticon {
  font-size: 16px;
  vertical-align: middle;
}
/deep/ .ant-btn-primary {
  width: 85px;
  height: 30px;
  border-radius: 2px;
  background: #1890ff;
  margin-right: 10px;
}
/deep/ .default {
  width: 85px;
  height: 30px;
  border-radius: 2px;
}
/deep/ .ant-table-thead > tr > th {
  background: #dadee9 !important;
}
/deep/.ant-table-thead > tr:first-child > th:first-child,
/deep/ .ant-table table {
  border-radius: unset;
  line-height: 1;
}
/deep/ .ant-table-tbody .ant-table-row td {
  &:nth-child(2) {
    color: #3e8ee2;
  }
}
/deep/ .ant-table-tbody .ant-table-row td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.attach {
  border: 1px solid #e6e6e6;
  background-color: #fff;
  padding-bottom: 30px;
  .header {
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    padding: 20px 0 0 20px;
  }
  .content {
    padding: 15px;
    .projectFile {
      .title {
        border-left: 3px solid #47a4fa;
        padding: 0 10px;
        .download-control {
          display: inline-block;
          margin-left: 10px;
        }
      }
    }
    ul {
      list-style: none;
      padding: 15px 0;
      border-bottom: 1px solid #f7f7f7;
      li {
        padding: 15px !important;
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        margin-bottom: 15px;
        display: flex;
        align-items: flex-start;
      }
      .upload-demo {
        display: flex;
        /deep/ .el-upload {
          margin-right: 10px;
        }
      }
    }
    .attach-cls {
      .upload-control {
        margin-bottom: 15px;
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
  }
}
</style>